<template>
  <svg aria-hidden="true" class="icon-svg">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>
<script lang="ts" setup name="SvgIcon">
import { computed } from 'vue'
const props = withDefaults(
    defineProps<{
        prefix?: string;
        name: string;
        color?: string;
        borderColor?: string;
    }>(),
    {
        prefix: 'icon',
        name: '',
        color: '#333',
        borderColor: '#0085FA'
    }
)
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
<style lang="scss" scoped>
.icon-svg {
    width: 34px;
    height: 20px;
    color: v-bind('props.borderColor');
}
</style>
